<template>
    <div>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="item in newslist" :key=item.title>
                <router-link :to="'/home/newsinfo/'+item.title">
                    <img class="mui-media-object mui-pull-left" :src=item.pic>
                    <div class="mui-media-body">
                        <h1>{{item.title}}</h1>
                        <p class='mui-ellipsis'>
                            <span>发表时间：{{item.time}}</span>
                            <span>{{item.src}}</span>
                        </p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui'

    export default {
        name: "newsList",
        data(){
            return {
                newslist:[],
            }
        },
        methods:{
            getNewsList(){   //获取新闻列表
                this.$axios.get('/get?channel=教育&start=0&num=40&appkey=5fd40bffd271d007').then(res=>{
                    this.newslist=res.data.result.list
                }).catch(function (err) {
                    console.log(err)
                    Toast('获取新闻列表失败')
                })
        }
    },
        created() {
            this.getNewsList()
        }

    }
</script>

<style scoped>
    .mui-table-view li h1{
        font-size:14px;
    }
    .mui-ellipsis {
        font-size:12px;
        color:#226aff;
        display: flex;
        justify-content: space-between;
    }
</style>